<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>聚光灯效果</title>
  </head>
  <body>
    <h1 data-spotlight="TypeScript">TypeScript</h1>
  </body>

  <style>
    html {
      font-size: 15px;
    }
    body {
      background: #222222;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    h1 {
      color: #333333;
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      font-size: 8rem;
      letter-spacing: -0.3rem;
      position: relative;
    }
    h1::after {
      content: attr(data-spotlight);
      color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-clip-path: ellipse(100px 100px at 0 50%);
      clip-path: ellipse(100px 100px at 0 50%);
      animation: spotlight 5s infinite;
      background-image: url('https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: 150%;
      background-position: center center;
      -webkit-background-clip: text;
      background-clip: text;

    }
    @keyframes spotlight {
      0% {
        -webkit-clip-path: ellipse(100px 100px at 0 50%);
        clip-path: ellipse(100px 100px at 0 50%);
      }

      50% {
        -webkit-clip-path: ellipse(100px 100px at 100% 50%);
        clip-path: ellipse(100px 100px at 100% 50%);
      }

      100% {
        -webkit-clip-path: ellipse(100px 100px at 0 50%);
        clip-path: ellipse(100px 100px at 0 50%);
      }
    }
  </style>
</html>
